#include("_user_detail_layout.html")
#@user_detail_layout("detail-avatar")

#define layout_script()
<script src="#(CPATH)/static/components/jcrop/js/jquery.jcrop.min.js"></script>
<script src="#(CPATH)/static/components/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="#(CPATH)/static/components/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<script src="#(CPATH)/static/components/jquery-file-upload/js/jquery.fileupload.js"></script>
<script>

    var jcrop_api;
    $('#cfile').fileupload({
        dropZone: $('#uploader'),
        url: '#(CPATH)/commons/attachment/upload',
        sequentialUploads: true,
        done: function (e, data) {
            if (data.result.state == "ok") {
                if (jcrop_api) {
                    jcrop_api.destroy()
                }
                var src = data.result.src;
                $("#path").val(src);
                $("#avatarimg").attr("src", "#(CPATH)" + src);
                $('#avatarimg').Jcrop({
                    setSelect: [30, 30, 250, 250],
                    minSize: [50, 50],
                    aspectRatio: 1,
                    onSelect: updateSelect,
                    onChange: updateSelect
                }, function () {
                    jcrop_api = this;
                });
            }
        }
    });

    function updateSelect(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    }

    function submitSuccess() {
        toastr.options.onHidden = function () {
            location.reload();
        }
        toastr.success('头像修改成功，2s后自动刷新...');
    }
</script>
#end

#define layout_css()
<link rel="stylesheet" href="#(CPATH)/static/components/jcrop/css/jquery.jcrop.min.css" rel="stylesheet">
<link rel="stylesheet" href="#(CPATH)/static/components/jquery-file-upload/css/jquery.fileupload.css">
#end

#define detail()
<form class=" autoAjaxSubmit" autocomplete="off" action="#(CPATH)/admin/user/doSaveAvatar"
      method="post"
      data-ok-function="submitSuccess">
    <input type="hidden" name="path" id="path">
    <input type="hidden" name="x" id="x">
    <input type="hidden" name="y" id="y">
    <input type="hidden" name="w" id="w">
    <input type="hidden" name="h" id="h">
    <input type="hidden" name="uid" value="#(user.id)">
    <div class="card-body">
        <div id="uploader">
            <span class="btn btn-block btn-primary fileinput-button" style="width: 120px">
                <i class="fas fa-plus"></i>
                <span>选择图片...</span>
                <input id="cfile" type="file" name="files[]" multiple>
            </span>
        </div>
        <div class="text-center" style="margin-bottom: 20px">
            <div style="max-width:500px;margin: auto">
                <img src="#(CPATH)/static/commons/img/avatar.png" style="width: 100%;height: 100%" id="avatarimg">
            </div>
        </div>
    </div>

    <div class="card-footer">
        <div class="col-sm-10 submit-block">
            <div class="card-submit">
                <button type="submit" class="btn btn-primary"> 保存选择区域</button>
            </div>
        </div>
    </div>
</form>
#end

